/* 动画效果 */
.fadeInDown {
  animation: fadeInDown1 1s linear both;
  /* Firefox: */
  -moz-animation: fadeInDown1 1s linear both;
  /* Safari 和 Chrome: */
  -webkit-animation: fadeInDown1 1s linear both;
  /* Opera: */
  -o-animation: fadeInDown1 1s linear both;
  -ms-animation: fadeInDown1 1s linear both;
}
.slideInDown{
    animation: fadeInDown1 1s linear both;
    /* Firefox: */
    -moz-animation: fadeInDown1 1s linear both;
    /* Safari 和 Chrome: */
    -webkit-animation: fadeInDown1 1s linear both;
    /* Opera: */
    -o-animation: fadeInDown1 1s linear both;
    -ms-animation: fadeInDown1 1s linear both;
  }
.fadeInUp {
  animation: fadeInUp1 1s linear both;
  /* Firefox: */
  -moz-animation: fadeInUp1 1s linear both;
  /* Safari 和 Chrome: */
  -webkit-animation: fadeInUp1 1s linear both;
  /* Opera: */
  -o-animation: fadeInUp1 1s linear both;
  -ms-animation: fadeInUp1 1s linear both;
}

.slideInUp{
    animation: fadeInUp1 1s linear both;
    /* Firefox: */
    -moz-animation: fadeInUp1 1s linear both;
    /* Safari 和 Chrome: */
    -webkit-animation: fadeInUp1 1s linear both;
    /* Opera: */
    -o-animation: fadeInUp1 1s linear both;
    -ms-animation: fadeInUp1 1s linear both;
  }
.slideInRight {
    animation: fadeInRight1 1s linear both;
    /* Firefox: */
    -moz-animation: fadeInRight1 1s linear both;
    /* Safari 和 Chrome: */
    -webkit-animation: fadeInRight1 1s linear both;
    /* Opera: */
    -o-animation: fadeInRight1 1s linear both;
    -ms-animation: fadeInRight1 1s linear both;
  }
.fadeInRight {
  animation: fadeInRight1 1s linear both;
  /* Firefox: */
  -moz-animation: fadeInRight1 1s linear both;
  /* Safari 和 Chrome: */
  -webkit-animation: fadeInRight1 1s linear both;
  /* Opera: */
  -o-animation: fadeInRight1 1s linear both;
  -ms-animation: fadeInRight1 1s linear both;
}
.slideInLeft {
    animation: fadeInLeft1 1s linear both;
    /* Firefox: */
    -moz-animation: fadeInLeft1 1s linear both;
    /* Safari 和 Chrome: */
    -webkit-animation: fadeInLeft1 1s linear both;
    /* Opera: */
    -o-animation: fadeInLeft1 1s linear both;
    -ms-animation: fadeInLeft1 1s linear both;
  }
  
.fadeInLeft {
  animation: fadeInLeft1 1s linear both;
  /* Firefox: */
  -moz-animation: fadeInLeft1 1s linear both;
  /* Safari 和 Chrome: */
  -webkit-animation: fadeInLeft1 1s linear both;
  /* Opera: */
  -o-animation: fadeInLeft1 1s linear both;
  -ms-animation: fadeInLeft1 1s linear both;
}

@keyframes fadeInDown1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  /* 0% {
      opacity: 0;
      -webkit-transform: translateY(-40px);
      -ms-transform: translateY(-40px);
      transform: translateY(-40px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    } */
}
@keyframes fadeInLeft1 {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  /* 0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }
  100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    } */
}
@keyframes fadeInRight1 {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  /* 0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    } */
}
@keyframes fadeInUp1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  /* 0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    } */
}
